<template>
  <div class="page">
    <div class="no_card_box">
      <div class="top_title">免输卡号，快速绑卡</div>
      <div class="bind_list" v-for="(item, index) in creditList.value" :key="item.binBankId"
        @click="handleChangeCard(index, item)">
        <div class="bank_box_icon_box">
          <div :class="`bank-img ${item.binBankId}`"></div>
        </div>
        <div class="flex line_bottom">
          <div class="card_name">{{ item.binBankName }}</div>
          <div class="flex" style="padding-right:5px;"><van-icon name="arrow" class="_icon_arrow" color="#CCCCCC" /></div>

        </div>
      </div>
    </div>
    <div class="no_card_box">
      <div class="top_title">输入卡号绑卡</div>
      <div class="bottom-box">
        <span @click="jumpPage">点击输入本人信息，绑定银行卡</span>
      </div>
    </div>
  </div>
  <timeOut :isTimeOut="isTimeOut"></timeOut>
</template>

<script setup>
import { paymentListH5, queryOrderExpireTime, getOneKeySignCardTypeList } from '@/api/api.js'
import { useRouter, useRoute } from 'vue-router'
import { reactive, ref, onMounted, getCurrentInstance, inject, watch, onBeforeUnmount } from 'vue'
import { useCounterStore } from '../../store/counter';
const isNextDisabled = ref(true)
const router = useRouter()
const { proxy } = getCurrentInstance()
const isTimeOut = ref(false)
const orderTimer = ref(null)
const effectTime = ref('')
const userInfos = reactive({})
const creditList = reactive({})

const handleShowBankList = () => {
  router.push({
    path: '/bankList',
    query: {
      showType: 'readonly'
    }
  })
}
onMounted(() => {
  getAipList()
  // getOrderTime()
})
const getAipList = async () => {

  let res = await getOneKeySignCardTypeList()
  try {
    if (res.retCode == '0000') {
      creditList.value = res.data || []
    }
  } catch (err) {
    console.log(err)
  }
}
const jumpPage = () => {
  router.push({
    path: '/bindCard',
    query: {
      cardId: ''
    }
  })
}
const handleChangeCard = (index, item) => {
  router.push({
    path: '/no_bindCardForm',
    query: { binBankId: item.binBankId, binBankCardName: item.binBankName, debitFlag: item.debitFlag, creditFlag: item.creditFlag }
  })

}
onBeforeUnmount(() => {
  clearInterval(orderTimer.value)
})
// 获取订单有效期时间
const getOrderTime = async () => {
  userInfos.value = proxy.$globalFn.getStorage('urlParameters')
  try {
    let res = await queryOrderExpireTime(userInfos.value)
    if (res.retCode == "0000") {
      effectTime.value = res.data;
      startCountDown(); // 开始倒计时
    } else {
      // 订单超时提示
      isTimeOut.value = true;
    }
  } catch (error) {
    console.error(error);
    proxy.$showToast("获取订单有效期时间接口错误，请重新尝试！")
  }
}
// 超时提醒
function timeoutRemind(seconds) {
  if (seconds <= 0) {
    isTimeOut.value = true
  }
}
// 倒计时
function startCountDown() {

  // if (orderTimer.value) {
  //   clearInterval(orderTimer.value);
  //   orderTimer.value = null;
  // }
  orderTimer.value = setInterval(function () {
    effectTime.value -= 1;
    proxy.$globalFn.setStorage('effectTime', effectTime.value)
    if (effectTime.value < 0) return;
    timeoutRemind(effectTime.value);
    if (effectTime.value <= 0 && orderTimer.value) {
      clearInterval(orderTimer.value);
      orderTimer.value = null;
    }
  }, 1000);
}
function trimAll(ele) {
  if (typeof ele === "string") {
    return ele.split(/[\t\r\f\n\s]*/g).join("");
  } else {
    console.error(
      typeof ele +
      "is not the expected type, but the string type is expected"
    );
  }
}
const handleTestPhone = proxy.$_.debounce((val) => {
  let trimNum = trimAll(val)
  proxy.$refs.bankNum.value = proxy.$globalFn.addSpaceToNumber(val)
  const msg = proxy.$globalFn.rules('bankNum', trimNum)
  if (msg == true) {
    isNextDisabled.value = false
  } else {
    proxy.$showToast(msg);
    isNextDisabled.value = true
  }
}, 1000)

</script>

<style lang="sass" scoped>
@import '@/styles/variables.scss'
.page
  height: 100%
  background: #F9F9F9
  padding: 16px
.right_box
  margin-top: 13px
  margin-bottom: 25px
  text-align: right
.bank_btn
  color: $global_color
  font-size: 14px
  display: inline-block
.add_card_box
  color: #222
  font-size: 18px
  font-weight: bold
  padding: 40px 0
.inp_box
  border-bottom: 1px solid #DEDEDE
  // height: calc( 100% - 1px )
.card_inp
  width: 203px
  font-size: 15px
  margin-bottom: 17px
  outline: none
  border: none
.card_inp::placeholder
  color: #CFCFCF
.label_title
  font-size: 15px
  margin-right: 30px

.no_card_box
  background: #fff
  padding-left: 16px
  padding-top: 20px
  margin-bottom: 16px
  border-radius: 8px
.top_title
  color: #222
  font-size: 17px
  font-weight: bold
  margin-bottom: 6px
.bottom-box
  margin-top: 20px
  display: flex
  justify-content: center
  margin-left: -16px
  padding-bottom: 30px
  span
    display: inline-block
    font-size: 15px
    color: #333
    font-weight: 400
    border: 1px solid #D6D6D6
    padding: 11px 48px 13px 48px
    border-radius: 45px
.bind_list
  padding-right: 16px
  padding-left: 0
  padding-bottom: 0
  display: flex
  align-items: center
.bank_box_icon_box
  width: 24PX
  height: 24PX
  margin-right: 12px
  display: flex
  align-items: center
.card_name
  font-size: 15px
  color: #333333
.line_bottom
  width: 100%
  height: 55px
  border-bottom: 1px solid #E6E6E6
  justify-content: space-between
.bind_list:last-child .line_bottom
  border-bottom: none
._icon_arrow
  font-size: 16px
</style>
